<template>
	<view class="invite">
		<SRV-topbar title="邀请中心" :isLeft="true"></SRV-topbar>
		<!-- <image class="img-bj" src="https://hdsq.aoorange.cn/attachment/xcx/my/invite_bg.png" mode=""></image> -->
		<image class="img-bj" :src="codeImg" mode=""></image>
		<!-- <view class="con">
			<view class="code">
				<image :src="codeImg" mode="aspectFill"></image>
			</view>
		</view> -->
		<view class="remark" v-html="info.remark"></view>
		<view class="bottom" :style="'height:' + bottomHeight + 'rpx;'">
			<button class="item" @click="showShareList()">
				<image src="https://hdsq.aoorange.cn/attachment/xcx/icon/invite_icon1.png" mode="widthFix"></image>
				<text >分享海报</text>
			</button>
			<button class="item" @click="jump('invitation_list')">
				<image src="https://hdsq.aoorange.cn/attachment/xcx/icon/invite_icon3.png" mode="widthFix"></image>
				<text >我的邀请</text>
			</button>
		</view>
        <uni-popup ref="shareBox" type="bottom">
        	<view class="pay_type">
        		<image @click="close" class="close" src="https://hdsq.aoorange.cn/attachment/xcx/icon/close1.png" mode="aspectFill"></image>
        		<view class="title">选择分享主图</view>
                <view class="line">
                    <view v-for="(item,index) in info.shareList" :key="index" :class="'item ' + (nowId == index ? 'nowSel' : '')" @click="subImage(index)">
                        <image :src="item.thumb" mode="aspectFill"></image>
                        <image src="../../static/img/checkbox_check.png" mode="widthFill" class="selToken" v-if="nowId == index" style="width: 50rpx;height: 50rpx;"></image>
                    </view>
                </view>
                <view :style="'display: flex;height:' + bottomHeight + 'rpx;'">
                    <view  class="pay_bot" @click="saveImgToLocal()">保存图片</view>
                    <button class="pay_bot" open-type="share">确认分享</button>
                </view>
        	</view>
        </uni-popup>
	</view>
</template>

<script>
    var _self = this;
	import serve from '../../static/request.js';
	// import storage from '../../static/appkey.js';
	import common from '../../static/jump.js';
	import ShareIndex from '../../static/share.js';
	export default {
		mixins: [ShareIndex],
		data() {
			return {
                info: {
                    codeUrl: '',
                    remark: '',
                    shareList: []
                },
                codeImg: '',
                nowId : 0,
				bottomHeight: 110,
			}
		},
		methods: {
			getShare() {
                uni.showLoading({
                    title: '加载中',
                    mask: true
                });
				serve.request({
					url: '/member/invite/main',
					data: {
						appkey: uni.getStorageSync('appkey'),
						'access-token': uni.getStorageSync('access-token'),
					},
                    v: '/v3'
				}).then(res => {
					_self.info = res.data;
                    _self.shareItem = _self.info.shareList[_self.nowId];
                    _self.shareItem.linePaht = '/pages/index/index';
                    _self.shareItem.query = 'parentKey=' + uni.getStorageSync('parentKey');
                    _self.codeImg = _self.shareItem.imageUrl;
                    uni.hideLoading();
				});
			},
            subImage(i) {
                _self.nowId = i;
                _self.shareItem = _self.info.shareList[_self.nowId];
                _self.shareItem.linePaht = '/pages/index/index';
                _self.shareItem.query = 'parentKey=' + uni.getStorageSync('parentKey');
                _self.$forceUpdate();
            },
            showShareList(){
            	_self.$refs.shareBox.open();
            },
			close() {
				_self.$refs.shareBox.close();
			},
			saveImgToLocal() {
				uni.showModal({
					title: '提示',
					content: '确定保存到相册吗',
					success: function (res) {
						if (res.confirm) {
							uni.downloadFile({
									url: _self.shareItem.imageUrl,//图片地址
									success: (res) =>{
										if (res.statusCode === 200){
											uni.saveImageToPhotosAlbum({
												filePath: res.tempFilePath,
												success: function() {
													uni.showToast({
														title: "保存成功",
														icon: "none"
													});
												},
												fail: function() {
													uni.showToast({
														title: "保存失败",
														icon: "none"
													});
												}
											});
										} 
									},
									fail: function() {
										uni.showToast({
											title: "保存失败2",
											icon: "none"
										});
									}
								})
						} 
					}
				});
			},
			jump(jump_type, jump_link){
				common.jump(jump_type, jump_link);
			}
		},
		onLoad() {
            _self = this;
			if(uni.getSystemInfoSync().safeAreaInsets.top > 20){
				_self.bottomHeight = 150;
			}
            _self.getShare();
		},
	}
</script>

<style scoped lang="scss">
	.invite {
		display: inline-block;
		position: relative;
		.menu-box{
            top: 170rpx;
            width: 100vw;
            position: absolute;
            z-index: 2;
            display: flex;
            align-items: center;
            justify-items: center;
		}
		.menu-now{
			padding: 10rpx 0;
			margin: 0rpx 2vw;
			width: 25%;
			text-align: center;
			color: #FFFFFF;
			border-bottom: 6rpx solid #FFFFFF;
			
		}
		.menu{
			padding: 10rpx 0;
			margin: 0rpx 2vw;
			width: 25%;
			text-align: center;
			color: #333;
		}
		.img-bj{
			z-index: 1;
			width: 100vw;
			height: calc(100vh - 700upx);
		}
		
		.con{
			position: absolute;
			z-index: 2;
			top: 280rpx;
			// padding-top: 580rpx;
			.code{
				width: 580rpx;
				height: 580rpx;
				margin: 0rpx 85rpx;
				background:rgba(255,255,255,0.92);
				border-radius:12rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				image{
					width:475rpx;
					height:475rpx;
				}
			}
		}
        .remark {
            z-index: 2;
            // position: absolute;
            // top: 900rpx;
            padding: 0 20rpx;
            // color: #fff;
            font-size: 34rpx;
        }
		.bottom{
			display: flex;
			justify-content: space-around;
			width:100%;
			height:100rpx;
			position: fixed;
			bottom: 0;
			background:#ffd900;
			button{
				background: #ffd900;
			}
			button::after{
				border: none;
			}
			.item{
				display: flex;
				align-items: center;
				font-size: 28rpx;
				color: #666666;
				image{
					width:32rpx;
					height:32rpx;
					margin-right: 10rpx;
				}
			}
		}
		
		.pay_type {
			position: relative;
			width: 100%;
			background: #FFFFFF;
			padding-bottom: 60upx;
			max-height: 80vh;
		
			text {
				font-size: 42rpx;
			}
		
			.close {
				position: absolute;
				width: 40upx;
				height: 40upx;
				right: 40upx;
				top: 30upx;
			}
		
			.title {
				width: 100%;
				text-align: center;
				height: 100upx;
				line-height: 100upx;
				font-size: 36upx;
				border-bottom: 1upx rgba(251, 251, 253, 1) solid;
			}
            
            .line{
                display: flex;
                flex-wrap: wrap;
                flex-direction: row;
                padding: 20rpx;
                
            	.item {
                    width: 45%;
                    text-align: center;
                    margin: 10rpx;
                    padding: 10rpx 0 0;
                    
                    image {
                        width: 95%;
                        height: 400rpx;
                    }
                }
                
                .nowSel {
                    border: 10rpx solid #FFBF0A;
                    position: relative;
                    border-radius: 20rpx;
                }
                .selToken {
                    width: 50rpx;
                    height: 50rpx;
                    position: absolute;
                    top: 0;
                    right: 0rpx;
                }
            }
            .pay_bot:first-child{
                background: #aaa;
            }
			.pay_bot {
				width: 50%;
				// position: fixed;
				// left: 0;
				// bottom: 0;
				height: 100upx;
				background: #FFBF0A;
				color: #fff;
				font-size: 32upx;
				line-height: 100upx;
				text-align: center;
				border-radius: 0;
		
				&::after {
					border: none;
				}
			}
		}
	}
</style>
